<template>
    <div class="page-main single-result" id="canvas">
        <div >
            <div class="name">蔡某某</div>
            <div class="f-name">蔡</div>
            <div class="des-box">
                <div class="f-info">
                    <div class="tit">
                        <i></i>姓氏介绍
                    </div>
                    <div class="content">
                        <p>见于《世本》。战国时秦国有蔡泽，为相。《急就章》列为汉代常见姓氏之一。汉代有蔡千秋，沛人，字少君，授《春秋·毂梁传》，为谏议大夫。东汉有蔡伦，桂阳人，字敬仲，和帝时为中常侍。造蔡侯纸。蔡邕，陈留圉城人，字伯喈，博学多才，为蔡文姬之父。又有另一蔡邕，上虞人，与陈留蔡邕同时．《中国人名大辞典》收有蔡氏195例。宋《百家姓》列为第155姓。</p>
                    </div>
                </div>
                <div class="f-info">
                    <div class="tit">
                        <i></i>家规家训
                    </div>
                    <div class="content">
                        <p>一、愛人者人恆愛之，敬人者人恆敬之。我惡人人亦惡我，我慢人人亦慢我，此感應自然之理。切不可結怨於人，結怨於人辟如服毒，其毒日久必發，但有小大遲速不同耳。人家祖宗受人欺侮，其子孫傳説不忘，乘時遘會，終須報之。彼我同然，出爾反爾，豈可不戒也？</p>
                        <p>二、臨事讓人一步自有餘地，臨財放寬一分自有餘味。待人接物要看自己地步，若自己勝人一分，切宜自下一分，使不得一毫氣概。若自己遜人一分，切宜自重一分，使不得一毫諂侫。</p>
                        <p>板村蔡氏义派支譜</p>
                    </div>
                </div>
            </div>
            <div class="btm">
                <img :src="logo" alt="" class="logo">
                <img :src="mzlogo" alt="" class="mzlogo">
                <a href="">扫一扫了解更多</a>
                <img :src="qrCode" alt="">
            </div>
        </div>
        <a href="javascript:" class="download" v-if="showBtn" @click="download">下载</a>
    </div>
</template>
<script>
    import html2canvas from 'html2canvas'
    export default {
        data(){
            return{
                showBtn:true,
                qrCode:require('./../../assets/img/qr.png'),
                logo:require('./../../assets/img/logo2.png'),
                mzlogo:require('./../../assets/img/mzlogo.png'),
            }
        },
        methods:{
            download(){
                this.showBtn = false
                this.$nextTick(()=>{
                    new html2canvas(document.getElementById('canvas'), {
                        allowTaint: true,
                        useCORS: true
                    }).then(canvas => {
                        this.convertCanvasToImg(canvas)
                        this.showBtn = true
                    })
                })
            },
            convertCanvasToImg(canvas){
                const myBlob = this.dataURLtoBlob(canvas.toDataURL('img/png', 0.92))
                let myUrl = URL.createObjectURL(myBlob)
                this.downImg(myUrl)
            },
            dataURLtoBlob(dataurl){
                let arr = dataurl.split(',')
                let mime = arr[0].match(/:(.*?);/)[1]
                let bstr = atob(arr[1])
                let n = bstr.length
                let u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                return new Blob([u8arr], { type: mime })
            },
            downImg(url){
                let a = document.createElement("a")
                let clickEvent = document.createEvent("MouseEvents");
                a.setAttribute("href", url)
                a.setAttribute("download", 'codeImg')
                a.setAttribute("target", '_blank')
                clickEvent.initEvent('click', true, true)
                a.dispatchEvent(clickEvent);
            }
        }
    }
</script>
